<template>
  <div>
    <div class="operation-box">
      <a-card title="预存款管理详情">
        <a-row class="detail-row-margin-bottom-15">
          <a-col span="6">
            姓名：{{detail.name}}
          </a-col>
          <a-col span="6">
            小区：{{detail.bd_info_text}}
          </a-col>
          <a-col span="6">
            楼宇：{{detail.house_build}}
          </a-col>
          <a-col span="6">
            房号：{{detail.house_name}}
          </a-col>
          <a-col span="6">
            手机号：{{detail.phone}}
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <div style="font-size: 15px;">通用预存款：<span style="font-size: 20px;color: red;">{{detail.ty}}</span></div>
            <div v-for="(item,index) in detail.zy" style="font-size: 15px;">{{item.category}}余额：<span style="font-size: 20px;color: red;">{{item.balance}}</span></div>
          </a-col>
        </a-row>
        <!--<a-row>-->
          <!--<a-col :span="8">-->
            <!--<div>备注：<span>{{detail.remarks}}</span></div>-->
          <!--</a-col>-->
        <!--</a-row>-->
      </a-card>
      <br />
      <a-row>
        <a-card title="预存款明细">
        <s-table ref="table" :columns="columns" :data="dataSource">
          <template slot="remarks" slot-scope="text, record">
            <a-tooltip placement="left">
              <template slot="title">
                <p>{{text}}</p>
              </template>
              <a-icon type="bars" style="cursor: pointer;"></a-icon>
            </a-tooltip>
          </template>
        </s-table>
        </a-card>
      </a-row>
      <a-button style="margin-left: 16px;" @click="() => { $router.go(-1) }">返回</a-button>
    </div>
  </div>
</template>

<script>
import { getDespositStore } from '@/api/cashier'
import { mapGetters } from 'vuex'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import {STable} from '@/components'
  export default {
    name: 'charge_pre_deposit_detail',
      components: {
          STable
      },
    data() {
      return {
        token:this.$ls.get(ACCESS_TOKEN),
        detail:{},
          columns: [
              { title: '金额', dataIndex: 'price', key: '2', width: 150 },
              { title: '类型', dataIndex: 't_text', key: '3', width: 150 },
              { title: '来源', dataIndex: 'come_text', key: '4', width: 150 },
              { title: '住户', width: 100, dataIndex: 'house_user_id_text', key: 'age' },
              { title: '手机号', dataIndex: 'phone', key: '1', width: 150 },
              { title: '时间', dataIndex: 'createtime', key: '5', width: 150 },
              { title: '预存类型', dataIndex: 'category', key: '7', width: 150 },
              { title: '备注', dataIndex: 'remarks', key: '6', width: 150,scopedSlots: { customRender: 'remarks' } },
          ],
        col:{
          labelCol:{xs:{span:24},sm:{span:8}},
          wrapperCol:{xs:{span:24},sm:{span:10}}
        },
          pas:[],
          queryParam: {},
          dataSource:parameter => {
              this.pas = parameter;
              parameter.des_id = this.$route.params.id;
              parameter.dets = 1;
              return this.getList(Object.assign(parameter, this.queryParam))
                  .then(res => {
                      return res
                  })
          },
      }
    },
      async mounted() {
      let { id } = this.$route.params;
      this.id = Number(id);
      if(!isNaN(this.id)){
        this.getInfo(id);
      }else this.$router.go(-1);
    },
    methods:{
        getList(param) {
            return new Promise((resolve,reject) => {
                this.axios({
                    method:'get',
                    url: '/cashier/get_desposit_store',
                    params:Object.assign(param,{token:this.token})
                }).then(res => {
                    if(res.code === 0){
                        resolve(res.data)
                    }else{
                        this.$message.error(res.data.msg,2);
                    }
                }).catch(err => {
                    this.$message.error('服务器发生错误...',2);
                    this.loading = false;
                })
            })
        },
      // 获取小区设置信息
      getInfo(id) {
        this.axios({
          method:'post',
          url:'/cashier/deposit_detail',
          data:{token:this.token,id}
        }).then(res => {
          this.detail = res.data;
        }).catch(err => {
          this.$message.error('服务器发生错误...',2);
        });
      },
    }
  }
</script>